<template>
  <div class="flow-process-node__normal-container" :class="{ vertical: vertical }">
    <div class="flow-process-node__normal-wrap">
      <div
        class="flow-process-node__normal-content-wrap"
        @click="onContentClick"
      >
        <!-- <flow-process-node-content v-if="!isConditionOrParallelNode"  :data="data" :nextData="nextData"></flow-process-node-content> -->
        <flow-process-normal-node-content :data="data" :nextData="nextData"></flow-process-normal-node-content>
        <biz-flow-process-delete-node
          v-if="showDeleteBtn && !readonly"
          :class="[data.type.includes('condition') ? 'condition-del': null]"
          :data="data"
          @click="onDeleteNode"
        ></biz-flow-process-delete-node>
      </div>
      <flow-process-arrow-line :data="data"></flow-process-arrow-line>
      <flow-process-add-node
        v-if="isConditionOrParallelNode"
        :nodeList="nodeList"
        :nodeData="data"
        :nextData="nextData"
        :btnType="isMouseEnter ? 'dot' : ''"
      ></flow-process-add-node>
    </div>
    <biz-flow-process-node
      v-for="(node, index) in data.nodeList || []"
      :key="node.id"
      :nodeList="data.nodeList"
      :data="node"
      :nextData="node[index + 1]"
      :isMouseEnter="isMouseEnter"
      :belong-condition-node-data="belongConditionNodeData"
      :children-list="childrenList"
    ></biz-flow-process-node>
  </div>
</template>

<script>
import ArrowLine from './ArrowLine.vue'
import AddNode from './AddNode.vue'
import emitter from '../emit'
import { store } from '../constant'
import FlowProcessNormalNodeContent from './NormalNodeContent.vue';

export default {
  name: 'biz-flow-process-normal-node',
  components: {
    [FlowProcessNormalNodeContent.name]: FlowProcessNormalNodeContent,
    [ArrowLine.name]: ArrowLine,
    [AddNode.name]: AddNode
  },
  props: {
    nodeList: {
      type: [Array, null],
      default() {
        return null
      }
    },
    childrenList: {
      type: [Array, null],
      default() {
        return null
      }
    },
    data: {
      type: Object,
      default: null
    },
    nextData: {
      type: Object,
      default: null
    },
    belongConditionNodeData: {
      type: Object,
      default: null
    },
    isMouseEnter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      readonly: store.readonly,
      vertical: store.vertical,
    }
  },
  computed: {
    showDeleteBtn() {
      return ['start', 'normal', 'cost', 'review'].includes(this.data.type)
    },
    /** 固定系统节点可添加自定义节点 */
    isConditionOrParallelNode() {
      const ADD_NODE = [ 'start', 'finish', 'normal', 'cost', 'review']

      if(!this.nodeList.some(item => item.type == 'start')){
        ADD_NODE.push('accept')
      } 
      const specialNodeList = this.nodeList.filter(item => ['cost', 'review'].includes(item.type))
      if(['cost', 'review'].includes(this.data.type)) {
        return specialNodeList?.length < 2
      }
      return ADD_NODE.includes(this.data.type)
    }
  },
  methods: {
    onContentClick() {
      store.currFlow = this.data;
      emitter.emit('node-content-click', this.data, this.nodeList)
    },

    async onDeleteNode() {
      try {
        // const res = await this.$confirm(this.$t('common.base.tip.areYouWantDeleteIt', {data1:this.data.title}), this.$t('common.base.toast'), {
        //   confirmButtonText: this.$t('common.base.makeSure'),
        //   cancelButtonText: this.$t('common.base.cancel'),
        //   type: 'warning',
        // })
        // if(res !== 'confirm') return
        emitter.emit(
          'delete-node-click',
          this.nodeList,
          this.childrenList,
          this.belongConditionNodeData,
          this.data
        )
      }catch(error){
        console.log(error)
      }
      

    }
  }
}
</script>

<style lang="scss" scoped>
.flow-process-node__normal-container {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;

  &.vertical {
    flex-direction: column;

    .flow-process-node__normal-wrap {
      flex-direction: column;
    }
  }

  .flow-process-node__normal-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
}
</style>
